import React from 'react';
import {Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message} from 'antd';
import OperatorConstant from "../../../utils/OperatorConstant";
const R = require('ramda');
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const TabPane = Tabs.TabPane;
const dateFormat = 'YYYY-MM-DD';

export default Form.create({wrappedComponentRef: true})(class OrderBilldetailList extends React.Component {
    constructor(props) {
        super(props);
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource
        this.state = {

        };
    }




    handleSearch = () => {
        let values = this.props.form.getFieldsValue();
        let newPage = this.props.customerReport.orderBilldetailPage;
        newPage.page = 1;
        let time = values.timeRange;
        let beginTime ="";
        let endTime ="";

        if (!R.isNil(time)) {
            if (time.length >= 2) {
                if (time[0] != '') {
                    beginTime = time[0].format(dateFormat);
                }
                if (time[1] != '') {
                    endTime = time[1].format(dateFormat);
                }

            }
        }

        this.props.dispatch({
            type: 'customerReport/getOrderBilldetailList',
            payload: {
                page: newPage,
                cstId: this.props.cstid,
                beginTime: beginTime,
                endTime: endTime,
                contractNo: values.contractNo,
            }
        });
    };

    handleExport=()=>{
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
        let values=this.props.form.getFieldsValue();
        let times=values.timeRange;

        this.props.dispatch({
            type:"customerReport/exporOrderBilldetailList",
            payload:{
                cstId: this.props.cstid,
                beginTime:R.isNil(times)||R.isEmpty(times)?null:times[0].format(dateFormat),
                endTime:R.isNil(times)||R.isEmpty(times)?null:times[1].format(dateFormat),
                cstName: this.props.dataSource.companyname,
            }
        })
    }

    columns = [
        {title: '合同协议号', dataIndex: 'contractno', key: 'contractno'},
        {title: '费用项', dataIndex: 'itemname', key: 'itemname'},
        {title: '费用金额', dataIndex: 'amt', key: 'amt'},
        {title: '总货值', dataIndex: 'totleamount', key: 'totleamount'},
        {title: '费用项备注', dataIndex: 'itemmemo', key: 'itemmemo'},
        ];

    render() {
        const { getFieldDecorator } = this.props.form;

        let formItemLayout = {
            labelCol: { xs: { span: 24 }, sm: { span: 6 } },
            wrapperCol: { xs: { span: 24 }, sm: { span: 14 } }
        };
        let values = this.props.form.getFieldsValue();


        let beginTime = "";
        let endTime = "";

        if (values.timeRange != null && values.timeRange != undefined) {
            if(values.timeRange.length >=2 ){
                if(values.timeRange[0] != ''){
                    beginTime = values.timeRange[0].format(dateFormat);
                }
                if(values.timeRange[1] != ''){
                    endTime = values.timeRange[1].format(dateFormat);
                }

            }

        }

        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.customerReport.orderBilldetailPage.size,
            total: this.props.customerReport.orderBilldetailPage.totalRow,
            showSizeChanger: true,
            current: this.props.customerReport.orderBilldetailPage.page,
            onShowSizeChange: (current, size) => {
                let newPage = this.props.customerReport.orderBilldetailPage;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'customerReport/getOrderBilldetailList',
                    payload: {
                        beginTime: beginTime,
                        endTime:   endTime,
                        page: newPage,
                        cstId: this.props.cstid,
                        contractNo: values.contractNo
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = this.props.customerReport.orderBilldetailPage;
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'customerReport/getOrderBilldetailList',
                    payload: {
                        beginTime: beginTime,
                        endTime:   endTime,
                        page: newPage,
                        cstId: this.props.cstid,
                        contractNo: values.contractNo
                    }
                });
            }
        }

        return (

            <div>
                <Row>
                    <Col span={8}>
                        <FormItem {...formItemLayout} label={'合同协议号'}>
                            {getFieldDecorator('contractNo')(
                                <Input />
                            )}
                        </FormItem>
                    </Col>
                    <Col span={8}>
                        <FormItem {...formItemLayout} label={'申请时间'}>
                            {getFieldDecorator('timeRange', {})(
                                <RangePicker

                                    showTime={{format: 'YYYY-MM-DD'}}
                                    format="YYYY-MM-DD"
                                    placeholder={['开始时间', '结束时间']}
                                />
                            )}
                        </FormItem>
                    </Col>

                    <Col span={2}>
                        <Button  type="primary" style={{marginLeft: 185}} onClick={this.handleExport.bind(this)}>导出数据</Button>
                    </Col>
                    <Col span={2}>
                        <Button type="primary" icon="search" onClick={this.handleSearch}>查询</Button>
                    </Col>
                </Row>

                <Table dataSource={this.props.customerReport.orderBilldetailList} columns={this.columns} bordered={true}
                       size={'middle'} pagination={pagination} scroll={{ x:true }}/>


            </div>
        )
    }
})

